<template>
  <!--添加此属性后可以根据index路径进行匹配了-->
  <el-menu
    active-text-color="#ffd04b"
    background-color="#2d3436"
    class="el-menu-vertical-demo"
    :default-active="currentPath"
    text-color="#fff"
    :collapse="isCollapse"
    router
    v-if="userInfo"
  >
    <el-menu-item index="/">
      <el-icon><icon-menu /></el-icon>
      <span>首页</span>
    </el-menu-item>
    <el-sub-menu
      v-for="item in userInfo.checkedkeys"
      :key="item.label"
      :index="'/' + item.path"
    >
      <template #title>
        <el-icon><location /></el-icon>
        <span>{{ item.label }}</span>
      </template>
      <el-menu-item
        v-for="child in item.children"
        :key="child.label"
        :index="`/${item.path}/${child.path}`"
        >{{ child.label }}</el-menu-item
      >
    </el-sub-menu>
    <!-- <el-sub-menu index="/manager">
      <template #title>
        <el-icon><location /></el-icon>
        <span>账户管理</span>
      </template>
      <el-menu-item index="/manager/managerlist">管理员列表</el-menu-item>
    </el-sub-menu> -->
  </el-menu>
</template>

<script>
import { Menu as IconMenu, Location } from '@element-plus/icons-vue'
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['userInfo', 'currentPath'])
  },
  props: {
    isCollapse: {
      // 接收外部必传的一个属性isCollapse
      type: Boolean,
      isRequired: true
    }
  },
  components: {
    Location,
    IconMenu
  }
}
</script>

<style scoped lang="scss">
.el-menu {
  border-right: none;
}
</style>
